{% extends 'blog/base.html' %} 
{% load static %}


{% block cate-title%}
<title>{{post.title}} | 阿凌的猫爬架</title>
{% endblock cate-title%}

{% block load-src %}
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1962070_9o8c1iysrsu.css">
    <link rel="stylesheet" href="{% static 'blog/css/extraClass.css'%}">
    <link rel="stylesheet" href="{% static 'blog/css/styles/a11y-dark.css'%}">
    <link rel="stylesheet" href="{% static 'blog/css/detail.css'%}">

    <script src="{% static 'blog/js/jquery.js'%}"></script>
    <script src="{% static 'blog/js/iconfont.js'%}"></script>
    <script src="{% static 'blog/js/detail.js'%}"></script>
    <script src="{% static 'blog/js/highlight.pack.js'%}"></script>
    <script src="{% static 'blog/js/highlightjs-line-numbers.js'%}"></script>
{% endblock load-src %}    

{% block acticle-style %}
<style>
.icon {
    width: 1.5em; 
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    position: absolute;
    left: 0px ;
    top: 10px ;
    font-size: 20px ;
    cursor: pointer;
}
</style>
{% endblock acticle-style %}


{% block acticle-title %}
    <div class="extra-box">
        <div class="acticle-title">{{post.title}} 
            <div class="roteZInf5S">
                <svg class="icon icon-sakura-flower" aria-hidden="true">
                    <use xlink:href="#icon-sakura-flower"></use>
                </svg>
            </div>
        </div>
        <ul class="acticle-nav">
            <div class="roteZInf5S">
                <svg class="icon icon-sakura-flower" aria-hidden="true">
                    <use xlink:href="#icon-sakura-flower"></use>
                </svg>
            </div>
            {{ post.toc|safe }}
        </ul>
    </div>
    
{% endblock acticle-title %}

{% block meta %}
    <p class="post-meta">
        <span class="post-time">{{ post.created_time }}</span>
        <i class="iconfont icon-icon-"></i> 
        <a class="post-cate" href="{% url 'blog:category' post.category.name %}" target="_blank">
          {{ post.category.name }}
        </a>
        <i class="iconfont icon-biaoqian"></i> 
        {% for tag in post.tags.all %}
            <a class="post-cate" href="{% url 'blog:tag' tag.name %}" target="_blank">
                {{tag.name}}
            </a>
        {% endfor %}
    </p>
    <div class="acticle-pic" style="background-image: url('{{post.pic}}');"></div>

{% endblock meta %}


{% block main %}
    <div class="article-main">
        {{post.body|safe}}
    </div>
    <div class="contact-comment">

      <section class="contact">
        <div class="reply-flag">
          <span>CANCEL</span>
          <span class="reply-id" style="display: none;">-1</span>
        </div>
        <div class="content">
            <h2 class="content-title">-评论-</h2>
            <p>Here you can post what you want to say, if you have more information please contact me by the following way.</p>
        </div>
        <div class="container">
          <div class="contactForm">
            <form id="comment_form" action="/" novalidate>
              <div class="inputBox">
                  <input type="text" id="new-name" name="" required="required" value={{request.user.username}}>
                  <span>-昵称-</span>
              </div>
              <div class="inputBox">
                  <input type="text" id="new-qq" class="" required="required"  value={{request.user.extension.qqnumber}}>
                  <input type="text" id="new-url" class="btn-hidden" required="required" value={{request.user.extension.url}}>
                  <span>-QQ-</span>
                  <a class="change-qq-url" title="change contact way">
                    <i class="iconfont icon-play"></i>
                  </a>
              </div>
              <div class="inputBox">
                  <input type="text" id="new-email" name="" required="required" value={{request.user.email}}>
                  <span>-邮箱-</span>
              </div>
              <div class="inputBox">
                  <textarea id="new-text" required="required" ></textarea>
                  <span>想说些什么？</span>
              </div>
              <a href="" class="submit-button">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                -SUBMIT-
              </a>
            </form>
          </div>
          <div class="contactInfo">
            <div class="box">
              <div class="contIcon"><i class="iconfont icon-web-link"></i> </div>
              <div class="text">
                <h3>-电联 Phone-</h3>
                <p>+86 18520664652</p>
              </div>
            </div>
            <div class="box">
              <div class="contIcon"><i class="iconfont icon-emailmarketing_filled"></i> </div>
              <div class="text">
                <h3>-邮箱 Email-</h3>
                <p>boogieLing_o@163.com</p>
                <p>boogieLing_o@qq.com</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="comment">
      {% for comment in comment_list %}
        <div class="father-box comment-box">
            <img src="{{ comment.picurl }}">
            <span class="space-span"></span>
            <span class="reply-com vnick">REPLY</span>
            <span class="vnick">{{ comment.name }}</span>
            <span class="vsys">{{ comment.platform }}</span>
            <span class="vsys">{{ comment.browser }}</span>
            <span class="get-pk vsys" style="display: none;">{{ comment.pk }}</span>
            <div class="vcontent">
               <!-- <p>{{ comment.text | safe }}</p> -->
               <p>{{ comment.text }}</p>
            </div>
            <span class="vtime">{{ comment.created_time }}</span>
        </div>
        <div class="son-comment">
          {% for sonComment in comment.sonComment_list%}
            <div class="comment-box">
                <img src="{{ sonComment.picurl }}">
                <span class="space-span"></span>
                <span class="reply-cur vnick"> @{{ comment.name }}</span>
                <span class="vnick">{{ sonComment.name }}</span>
                <span class="vsys">{{ sonComment.platform }}</span>
                <span class="vsys">{{ sonComment.browser }}</span>
                <div class="vcontent">
                   <p>{{ sonComment.text }}</p>
                </div>
                <span class="vtime">{{ sonComment.created_time }}</span>
            </div>
          {% endfor %}
        </div>
        {% empty %}
        <div class="comment-box">
            <img src="https://ling_boogie.gitee.io/peasonal_pic/default_use.png">
            <span class="space-span"></span>
            <span class="vnick">Your name.</span>
            <span class="vsys">OS platform</span>
            <span class="vsys">Browser model</span>
            <br>
            <div class="vcontent">
               <p>What do you want to say?</p>
            </div>
            <span class="vtime">created time</span>
        </div>
      {% endfor %}
      </section>
    </div>
<script>
  $(document).ready(function(){
    //预先发送csrf值，防止出现403错误
     
    $.ajaxSetup({
          data: {csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
    $('.submit-button').click(function(){
      var new_name = $("#new-name").val();  
      
      //alert(typeof({{post.pk}})) ;              
      //获得form中用户输入的name 注意这里的id_name 与你html中的id一致
      var new_url = $("#new-url").val();  
      var new_qq = $("#new-qq").val(); 
      if (new_url=="" && new_qq=="") {
        $("#new-url ~ span").text("至少需要QQ与网站中的一个。") ;
        return false ;
      } else if (new_url=="") {
        new_url="https://baidu.com" ;
      } else if (new_qq=="") {
        new_qq="-1" ;
      } else {}
      
      var new_picurl = "https://q1.qlogo.cn/g?b=qq&nk="+new_qq+"&s=100" ;
      if (new_url=="-1") {
          new_picurl="https://ling_boogie.gitee.io/peasonal_pic/default_use.png" ;
      }
      var new_email = $("#new-email").val();     
      var new_text = $("#new-text").val() ;
      var curInfo = getCommentInfo();
      var curUrl ;
      if ($(".content-title").text()=="-评论-") {
        curUrl="{% url 'comments:post_comment' post.pk %}" ;
        //
      } else if ($(".content-title").text()=="-回复-"){
        curUrl="{% url 'comments:reply_comment' tmp_use %}" ;
        curUrl=curUrl.replace(/0/, $(".reply-flag .reply-id").text());
        //alert(curUrl);
      }
      $.ajax({
         type:"POST",
         data: { name:new_name, 
                 url:new_url ,
                 email:new_email,
                 text:new_text,
                 qqnumber:new_qq,
                 picurl:new_picurl,
                 platform:curInfo.platform,
                 browser:curInfo.browser
                },
         url: curUrl, 
         //这里用的是static url 需要与urls.py中的name一致
         cache: false,
         dataType: "html",
         success: function(result, statues, xml) {
              if (result) {
                 var jsonData = JSON.parse(result);
                 if (jsonData['body_error']){
                   $("#new-text ~ span").text(jsonData['body_error']);
                 }
                 if (jsonData['username_error']) {
                   var temp=$("#new-name ~ span").text() ;
                   $("#new-name ~ span").text(jsonData['username_error']);
                 }
                 if (jsonData['qq_error']) {
                   var temp=$("#new-qq ~ span").text() ;
                   $("#new-qq ~ span").text(jsonData['qq_error']);
                 }
                 if (jsonData['picurl_error']) {
                   var temp=$("#new-qq ~ span").text() ;
                   $("#new-qq ~ span").text(jsonData['picurl_error']);
                 }
                 if (jsonData['url_error']) {
                   var temp=$("#new-url ~ span").text() ;
                   $("#new-url ~ span").text(jsonData['url_error']);
                 }
                 if (jsonData['email_error']) {
                   var temp=$("#new-email ~ span").text() ;
                   $("#new-email ~ span").text(jsonData['email_error']);
                 }
                 }else{
                    $("#new-name").val("{{request.user.username}}") ;
                    $("#new-url").val("{{request.user.extension.url}}") ;
                    $("#new-qq").val("{{request.user.extension.qqnumber}}") ;
                    $("#new-email").val("{{request.user.email}}") ;
                    $("#new-text").val("") ;
                    window.location.reload() ;
                    //提交表单后强行刷新页面
                }
          },
          error: function(xhr, textStatus, errorThrown){
          		window.location.reload() ;
              //alert("error:pls call the admin "+xhr.responseText);
          }
        });
        return false;
      });
  });
</script>
{% endblock main%}

{% block clip-page %}
    <div class="footer-page">
            <div class="cur-page">
                <span href="" class="page-cur">已閲-{{ post.views }}</span>
                <!-- <span>-</span>
                  <span href="" class="page-tot">{{ post.pk }}</span> --> 
            </div>
            {% if prev_post != 0 %}
                <a href="{{ prev_post.get_absolute_url }}" title="{{prev_post.title}}" class="page-prev"> 上一篇
                </a>
            {% else %}
                <a href="javascript:;" class="page-prev"> 上一篇 </a>
            {% endif %}
            {% if next_post != 0 %}
                <a href="{{ next_post.get_absolute_url }}" title="{{next_post.title}}" class="page-next">
                    下一篇
                </a>
            {% else %}
                <a href="javascript:;" class="page-next"> 下一篇 </a>
            {% endif %}
    </div>
{% endblock clip-page %}

{% block hightLight-src%}
  <script>
    // 开启代码高亮
    hljs.initHighlightingOnLoad();
    // 行号显示
    hljs.initLineNumbersOnLoad ({ singleLine:true });
  </script>
{% endblock hightLight-src%}